import {designPage, reactive, useRefs} from "plain-design-composition";

import addressData from '../../../data/address.json';
import treeData from '../../../data/tree.data.json';
import {$message, Button, ButtonGroup, Checkbox, Input, Plc, PlcIndex, PlcOperation, PlcTree, Segment, SegmentGroup, Table} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";
import {tPlcType} from "../../../../packages/components/Table/plc/utils/plc.utils";
import {iTreeNode} from "../../../../packages/components/TreeCore/createTreeNode";
import {deepcopy} from "plain-utils/object/deepcopy";
import {iTableOperation} from "../../../../packages/components/Table/standard/PlcOperation/PlcOperation.utils";
import {iTreeProps} from "../../../../packages/components/TreeCore/TreeCore.type";
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import StarOutlined from '@ant-design/icons/StarOutlined';
import StarFilled from '@ant-design/icons/StarFilled';
import MinusOutlined from '@ant-design/icons/MinusOutlined';
import PlusOutlined from '@ant-design/icons/PlusOutlined';
import InfoOutlined from '@ant-design/icons/InfoOutlined';

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const handler = {
    onClickHead: (plc: tPlcType) => {
      console.log('click head', plc.props.title);
    },
  };

  return () => (
    <DemoRow title="基本用法">
      <ButtonGroup style={{ marginBottom: '12px' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>
      <Table onClickHead={handler.onClickHead}>
        <PlcIndex/>
        <PlcTree
          data={treeData}
          ref={onRef.tree}
          title={'名称'}
          field="name"
          keyField="id"
          childrenField="subs"
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoSingle = designPage(() => {
  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    current: null as any,
    checkLast: false,
  });

  return () => (
    <DemoRow title="单选绑定(singleValueType=last)">

      <ButtonGroup style={{ display: 'inline-block', marginBottom: '12px' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
          <Checkbox v-model={state.checkLast} customReadonly/>
          <span>只能选择叶子节点</span>
        </Button>
        <Button label="当前选中节点" onClick={() => {$message(state.current?.name || '无选中任何节点');}}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <Button type="primary">单值绑定：{state.current?.name || '无选中任何节点'}</Button>

      <Table>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.current}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          defaultExpandAll
          singleValueType="last"
          checkLast={state.checkLast}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoSingleAll = designPage(() => {
  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    current: null as null | any[],
    checkLast: false,
  });

  return () => (
    <DemoRow title="单选绑定(singleValueType=all)">

      <ButtonGroup style={{ display: 'inline-block' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
          <Checkbox v-model={state.checkLast} customReadonly/>
          <span>只能选择叶子节点</span>
        </Button>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <Button type="primary">单值绑定：{(!state.current || state.current.length === 0 ? null : state.current.map(i => i.name).join('/')) || '无选中任何节点'}</Button>

      <Table>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.current}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          defaultExpandAll
          singleValueType="all"
          checkLast={state.checkLast}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoMultiple = designPage(() => {
  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
    checkLast: false,
  });

  return () => (
    <DemoRow title="多选绑定多值">

      <ButtonGroup style={{ display: 'inline-block' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
          <Checkbox v-model={state.checkLast} customReadonly/>
          <span>只能选择叶子节点</span>
        </Button>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
        <Button type="primary">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
      </ButtonGroup>
      <Table>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.checked}
          multiple
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          defaultExpandAll
          checkLast={state.checkLast}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoSize = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });
  const state = reactive({
    size: 'normal' as any
  });

  return () => (
    <DemoRow title="大小尺寸">
      <SegmentGroup v-model={state.size} style={{ marginBottom: '16px' }}>
        <Segment label="Mini" val="mini"/>
        <Segment label="Small" val="small"/>
        <Segment label="Normal" val="normal"/>
        <Segment label="Large" val="large"/>
      </SegmentGroup>
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>
      <Table size={state.size}>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoLazy = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    data: [] as any,
  });

  const lazyDemo = {
    treeData: [],
    isLeaf: (treeNode: iTreeNode) => {
      return treeNode.level >= 3;
    },
    getChildrenData: async (treeNode: iTreeNode | null) => {
      if (!treeNode) {
        console.log('getChildrenData:root');
        return lazyDemo.getCitiesByParentId(null);
      } else {
        console.log('getChildrenData', treeNode.data);
        return lazyDemo.getCitiesByParentId(treeNode.data.id);
      }
    },
    getCitiesByParentId(parentId: string | null) {
      return new Promise<any[]>((resolve) => {
        // 这个是模拟在数据库表中的数据
        const data = [
          { id: '1', name: '广东省', level: 1, parentId: null, subs: [] },
          { id: '2', name: '佛山市', level: 2, parentId: '1', subs: [] },
          { id: '3', name: '深圳市', level: 2, parentId: '1', subs: [] },
          { id: '4', name: '禅城区', level: 3, parentId: '2', subs: [] },
          { id: '5', name: '南山区', level: 3, parentId: '3', subs: [] },

          { id: '6', name: '湖南省', level: 1, parentId: null, subs: [] },
          { id: '7', name: '长沙市', level: 2, parentId: '6', subs: [] },
          { id: '8', name: '邵阳市', level: 2, parentId: '6', subs: [] },
          { id: '9', name: '天心区', level: 3, parentId: '7', subs: [] },

          { id: '11', name: '陕西省', level: 1, parentId: null, subs: [] },
        ];

        // 模拟请求，请求时间大概在1s-2s之间
        setTimeout(() => {
          resolve(data.filter(item => item.parentId === parentId));
        }, Math.random() * 1000 + 1000);
      });
    },
  };

  return () => (
    <DemoRow title="懒加载子节点">
      <Table>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          ref={onRef.tree}
          v-model:data={state.data}
          keyField="id"
          field="name"
          childrenField="subs"
          lazy
          isLeaf={lazyDemo.isLeaf}
          getChildrenData={lazyDemo.getChildrenData}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoMultipleStrict = designPage(() => {
  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
  });

  return () => (
    <DemoRow title="多选绑定多值(互不关联)">

      <ButtonGroup style={{ display: 'inline-block' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
        <Button type="primary">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
      </ButtonGroup>
      <Table>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.checked}
          multiple
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          defaultExpandAll
          checkStrictly
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoMultipleDisableCheck = designPage(() => {
  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
  });

  const isCheckAble = (data: any) => {
    return data.id.endsWith('1');
  };

  return () => (
    <DemoRow title="禁用选中">

      <ButtonGroup style={{ display: 'inline-block' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
        <Button type="primary">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
      </ButtonGroup>

      <Table>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.checked}
          multiple
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          defaultExpandAll
          isCheckAble={isCheckAble}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoScopedSlot = designPage(() => {
  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
  });

  const buildIndex = (treeNode: iTreeNode) => {
    return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
  };

  const scopedSlotDemo = {
    treeData: deepcopy(treeData),
    addItem: async (treeNode: iTreeNode) => {
      const { data } = treeNode;
      const subs = data.subs || [];
      const name = `n-${data.id}-${subs.length + 1}`;
      const id = name + Date.now().toString();
      subs.push({ id, name: `new item ${name}`, });
      // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
      data.subs = [...subs];
      refs.tree!.methods.refreshCheckStatus(treeNode);
      refs.tree!.methods.expand(id);
    },
    deleteItem: (treeNode: iTreeNode) => {
      let { data, parent } = treeNode;
      const subs = parent!.data.subs as any[];
      const ids = subs.map(item => item.id);

      subs.splice(ids.indexOf(data.id), 1);
      if (subs.length === 0) {
        parent!.data.subs = null;
      }
      refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
      refs.tree!.methods.clearInvalidChecked();
    },
    clear: (e: MouseEvent, treeNode: iTreeNode) => {
      e.stopPropagation();
      treeNode.data.subs = null;
      refs.tree!.methods.clearInvalidChecked();
    },
  };

  const operations: iTableOperation[] = [
    { label: '添加', position: 'inner', handler: ({ node }) => {scopedSlotDemo.addItem(refs.tree!.getTreeNodes()[node.state.index]);} },
    { label: '删除', position: 'inner', handler: ({ node }) => scopedSlotDemo.deleteItem(refs.tree!.getTreeNodes()[node.state.index]) },
  ];

  return () => (
    <DemoRow title="插槽渲染内容">

      <ButtonGroup style={{ display: 'inline-block' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
        <Button type="primary">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
      </ButtonGroup>

      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.checked}
          multiple
          ref={onRef.tree}
          data={scopedSlotDemo.treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          defaultExpandAll
          style={{ width: '500px' }}
          v-slots={{
            content: ({ treeNode, tableNode }) => <>{buildIndex(treeNode)}{tableNode.data.name}</>
          }}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
        <PlcOperation operations={operations}/>
      </Table>
    </DemoRow>
  );
});


export const demoNodeIcon = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const nodeStyles = { marginRight: '8px' };

  const nodeIcon: iTreeProps['nodeIcon'] = treeNode => treeNode.isLeaf() ? <StarOutlined style={nodeStyles}/> : <StarFilled style={nodeStyles}/>;

  return () => (
    <DemoRow title="节点图标">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          nodeIcon={nodeIcon}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoAccording = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  return () => (
    <DemoRow title="手风琴模式，打开节点的时候关闭兄弟节点">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>
      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          according
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoFilter = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    filterText: null as any
  });

  return () => (
    <DemoRow title="可筛选">
      <Input v-model={state.filterText} width="200px" style={{ marginBottom: '4px' }} placeholder="search keywords"/>
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          filterText={state.filterText}
          defaultExpandAll
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoIcon = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  return () => (
    <DemoRow title="展开图标">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>
      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          folderExpandIcon={<MinusOutlined/>}
          folderCollapseIcon={<PlusOutlined/>}
          leafIcon={<InfoOutlined/>}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoVirtual = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
  });

  return () => (
    <DemoRow title="虚拟滚动">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['1144179485591994368'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
      </ButtonGroup>
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
        <Button type="primary">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
      </ButtonGroup>

      <Table showRows={10} virtual>
        <PlcIndex/>
        <PlcTree
          title={'名称'}
          v-model={state.checked}
          ref={onRef.tree}
          data={addressData}
          keyField="id"
          field="name"
          childrenField="children"
          multiple
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoDraggable = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const isLeaf = (nodeData: any) => {
    return !nodeData.subs || nodeData.subs.length === 0;
  };

  return () => (
    <DemoRow title="可拖拽">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          draggable
          defaultExpandAll
          isLeaf={isLeaf}
        />

        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoCheckAbleDraggable = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
  });

  const isLeaf = (nodeData: any) => {
    return !nodeData.subs || nodeData.subs.length === 0;
  };

  return () => (
    <DemoRow title="可拖拽 + 可选中">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
        <Button type="primary">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
      </ButtonGroup>

      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
      </ButtonGroup>

      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          v-model={state.checked}
          multiple
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          draggable
          defaultExpandAll
          isLeaf={isLeaf}
        />

        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});

export const demoAllowDraggable = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const isLeaf = (nodeData: any) => {
    return !nodeData.subs || nodeData.subs.length === 0;
  };
  const isAllowDraggable: iTreeProps["isAllowDraggable"] = (dragNode) => {
    return !dragNode.data.id.startsWith('2-2');
  };
  const isAllowDroppable: iTreeProps["isAllowDroppable"] = (dragNode, modeNode) => {
    return !modeNode.data.id.startsWith('3');
  };

  return () => (
    <DemoRow title="可拖拽可放置控制">
      <div style={{ marginBottom: '8px' }}>
        <div>2-2开头的id不能被拖拽</div>
        <div>3开头的id不能放置任何节点</div>
      </div>
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>

      <Table showRows={10}>
        <PlcIndex/>
        <PlcTree
          ref={onRef.tree}
          data={treeData}
          keyField="id"
          field="name"
          childrenField="subs"
          draggable
          defaultExpandAll
          isLeaf={isLeaf}
          isAllowDraggable={isAllowDraggable}
          isAllowDroppable={isAllowDroppable}
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});


export const demoVirtualDraggable = designPage(() => {

  const { refs, onRef } = useRefs({ tree: PlcTree });

  const state = reactive({
    checked: [] as any[],
  });

  return () => (
    <DemoRow title="虚拟滚动+拖拽+多选 示例">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
        <Button label="当前选中节点" onClick={() => {
          const current = refs.tree!.methods.getCurrent();
          $message(!!current ? current.data.name : '未选中任何节点！');
        }}/>
        <Button label="展开并且设置当前选中节点" onClick={() => {
          refs.tree!.methods.expand('2-2-2');
          refs.tree!.methods.setCurrent('2-2-2');
        }}/>
      </ButtonGroup>
      <Table showRows={10} virtual>
        <PlcIndex/>
        <PlcTree
          v-model={state.checked}
          ref={onRef.tree}
          data={addressData}
          keyField="id"
          field="name"
          childrenField="children"
          multiple
          draggable
        />
        <Plc title={'编号'} field={'id'}/>
        <Plc title={'名称'} field={'name'}/>
      </Table>
    </DemoRow>
  );
});
